<template>
    <el-card>
        <!--搜索组件-->
        <search-component :search-entity="grammarSearchEntity" @onSearch="searchGrammar" @parentCourseChange="handlerParentCourseChange"/>
        <!--按钮组件-->
        <option-btn-component @onAdd="openAddWindow"/>
        <!--分割符-->
        <hr/>
        <!--数据展示-->
        <data-component :data-title="dataTitle" :data="datas" @update="dataUpdate" @delete="dataDelete"/>
        <!-- 数据分页 -->
        <page :total="dataTotal" :currentPage="grammarSearchEntity.currentPage" :data="datas" @pageSizeChange="pageSizeChange" @currentPageChange="currentPageChange" />
        <!--对话框-->
        <el-dialog width="980px" :visible.sync="dialogSwitch" :before-close="beforeClose" :close-on-click-modal="false"
                :destroy-on-close="true">
                <add-component v-if="switchType == 'add'" :entity="grammarEntity" :rules="grammarEntityRles" ref="addComponentREF"/>
                <update-component v-if="switchType == 'update'" 
                    :entity="grammarEntity" 
                    :rules="grammarEntityRles" 
                    :parent-course-data="parentCourseData"
                    :child-course-data="childCourseData"
                    @updateFormChange="getChildCourseTree"
                    ref="updateComponentREF"/>
                <!-- 对话框组件的按钮-->
                <template #footer>
                    <el-button @click="confirmExecute" type="primary" size="mini">确认</el-button>
                    <el-button @click="switchEvent" type="info" size="mini">取消</el-button>
                </template>
        </el-dialog>

    </el-card>
</template>
  
<script>
    
    import SearchComponent from './Search.vue';
    import {grammarSearchEntity,grammarEntity,grammarEntityRles,dataTitle} from './entity/grammarEntity'
    import optionBtnComponent from './OptionBtn.vue'
    import addComponent from './Add.vue'
    import {addGrammarApi,grammarPageApi,getCourseTreeApi,updateGrammarApi,deleteGrammarApi} from '@/api/words/wordApi'
    import dataComponent from './Data.vue'
    import page from "@/components/common/page.vue";
    import updateComponent from './Update.vue'
    

    export default{
        components:{SearchComponent,optionBtnComponent,addComponent,dataComponent,page,updateComponent},
        data(){
            return {
                //搜索组件数据对象
                grammarSearchEntity,
                //新增或修改数据对象
                grammarEntity,
                //新增或修改校验规则对象
                grammarEntityRles,
                //对话框打开的类型
                switchType: '',
                //控制对话框的开启
                dialogSwitch: false,
                //语法数据格式对象
                dataTitle,
                //语法数据渲染对象
                datas:[],
                //数据条数
                dataTotal:0,
                //渲染主课程的数据
                parentCourseData:[],
                //渲染子课程的数据
                childCourseData:[]

            }
        },
        methods:{
            //执行搜索
            searchGrammar(){
                this.grammarSearchEntity.currentPage = 1;
                this.getGrammarPage();
            },
            //打开添加窗口
            openAddWindow(){
                this.switchType = 'add';
                this.switchEvent();
            },
            //打开修改窗口
            dataUpdate(row){
                this.switchType = 'update';
                this.grammarEntity = row;
                this.getChildCourseTree(row.courseParentId);
                this.switchEvent();
            },
            //删除语法
            dataDelete(row){
                this.$confirm(`确认是否删除[${row.grammarContent}]?`,'操作确认',{
                    confirmButtonText:"确认",
                    cancelButtonText:'取消',
                    type:"warning",
                }).then(()=>{
                    deleteGrammarApi(row.grammarId).then(data=>{
                        this.searchGrammar();
                        this.$message.success("删除成功")
                    }).catch(err=>{
                        this.$message.error(err)
                    })
                })
            },
            //是否开启对话框
            switchEvent() {
                this.dialogSwitch = !this.dialogSwitch;
                if(this.dialogSwitch === false){
                    this.grammarEntity = {
                        courseId:null,
                        courseParentId:null,
                        grammarContent:"",
                        grammarExplain:"",
                        grammarExamples:[{
                            fileId:null,
                            contentR:'',
                            contentZ:'',
                            recorderExist:false
                        }],
                    }
                }
            },
            //对话框关闭前校验
            beforeClose(done) {
                if (this.visible) {
                    done();
                } else {
                    done(false);
                }
            },
            //处理父组件数据变更
            handlerParentCourseChange(parentCourseId){
                if(parentCourseId != 'ALL'){
                    this.grammarSearchEntity = {
                        courseId:null,
                        parentCourseId:parentCourseId,
                        grammarContent:"",
                        grammarExplain:"",
                        currentPage:1,
                        pageSize:10
                    }
                }else{
                    this.grammarSearchEntity = {
                        courseId:null,
                        parentCourseId:null,
                        grammarContent:"",
                        grammarExplain:"",
                        currentPage:1,
                        pageSize:10
                    }
                }
                
            },
            //弹框执行确认
            confirmExecute(){
                //新增语法
                if(this.switchType === 'add' && this.$refs.addComponentREF.validate()){
                    addGrammarApi(this.grammarEntity).then(data=>{
                        this.switchEvent();
                        this.$refs.addComponentREF.reset();
                        this.$message.success("操作成功")
                        this.searchGrammar();
                    }).catch(err=>{
                        this.$message.error(err);
                    })
                }
                //修改语法
                else{
                    updateGrammarApi(this.grammarEntity).then(data=>{
                        this.switchEvent();
                        this.$refs.updateComponentREF.reset();
                        this.$message.success("操作成功")
                        this.searchGrammar();
                    }).catch(err=>{
                        this.$message.error(err);
                    })
                }
            },
            //获取分页数据
            getGrammarPage(){
                let query = this.$deepCopy(this.grammarSearchEntity);
                if(query.parentCourseId == 'ALL'){
                    query.parentCourseId = null;
                }
                grammarPageApi(query).then(data=>{
                    this.datas = data.result;
                    this.dataTotal = data.total;
                }).catch(err=>{
                    this.$message.error(err);
                })
            },
            //页面大小变更-事件
            pageSizeChange(pageSize) {
                this.grammarSearchEntity.pageSize = pageSize;
                this.getGrammarPage();
            },
            //当前页变更-事件
            currentPageChange(currentPage) {
                this.grammarSearchEntity.currentPage = currentPage;
                this.getGrammarPage();
            },
            //获取父课程树（数据）
            getCourseTree(){
                getCourseTreeApi().then(data=>{
                    this.parentCourseData = data.map(item=>({value:item.courseId,label:item.courseName}));
                }).catch(err=>{
                    this.$message.error(err);
                })
            },
            //获取子课程树(数据)
            getChildCourseTree(courseId){
                getCourseTreeApi().then(data=>{
                    let result = data.find(node=>node.courseId == courseId);
                    if(result && result.child && result.child.length > 0){
                        this.childCourseData = result.child.map(item=>({value:item.courseId,label:item.courseName}))
                    }
                }).catch(err=>{
                    this.$message.error(err);
                })
            },
        },
        mounted(){
            //初始化携带参数跳转的页面
            if(this.$route.params.dataEntity){
                //搜索具体课程
                if(this.$route.params.dataEntity.parentId != 0){
                    this.grammarSearchEntity.parentCourseId = this.$route.params.dataEntity.parentId;
                    this.grammarSearchEntity.courseId = this.$route.params.dataEntity.courseId;
                }
                //搜索大课程
                else{
                    this.grammarSearchEntity.parentCourseId = this.$route.params.dataEntity.courseId;
                    this.grammarSearchEntity.courseId = null;
                }
            }  
            //获取分页数据
            this.getGrammarPage();
            //获取课程数据
            this.getCourseTree();
        }
    }
</script>
  
<style scoped lang="scss"></style>
  